<template>
  <div>
    <div class="content-item">
      <div>
        <span class="label">房源位置：</span>
        <el-select v-model="queryParams.schoolAreaId"
                   placeholder="--校区--"
                   @change="cascade('campus')"
                   size="small">
          <el-option v-for="(item, index) in campus"
                     :key="index"
                     :label="item.name"
                     :value="item.id">
          </el-option>
        </el-select>
        <el-select v-model="queryParams.campusId"
                   placeholder="--园区--"
                   @change="cascade('gardens')"
                   size="small">
          <el-option v-for="(item, index) in gardens"
                     :key="index"
                     :label="item.name"
                     :value="item.id">
          </el-option>
        </el-select>
        <el-select v-model="queryParams.buildingId"
                   placeholder="--楼栋--"
                   size="small">
          <el-option v-for="(item, index) in buildings"
                     :key="index"
                     :label="item.number + '栋' + item.unitNumber + '单元'"
                     :value="item.id">
          </el-option>
        </el-select>
        <el-input size="small"
                  style="width: 200px;"
                  placeholder="输入房间号"
                  v-intercept:param="queryParams.roomNum"
                  v-model.trim="queryParams.roomNum" />
      </div>
      <div class="g-mt10">
        <el-button size="small"
                   type="primary"
                   @click="query()">搜索
        </el-button>
        <el-button size="small"
                   @click="reset">重置
        </el-button>
        <el-button size="small"
                   v-if="userInfo.roleName !== '年级辅导员'"
                   @click="add">新增
        </el-button>
      </div>
    </div>
    <div class="content-item">
      <div class="g-mt10">
        <el-table :data="tableData"
                  @expand-change="getChildTable"
                  class="table-header-gray">
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-table :data="props.row.dataList"
                        class="child-table"
                        border>
                <el-table-column v-for="(item, index) in props.row.columns"
                                 :key="index"
                                 v-if="index !== 0"
                                 :label="formatTitle(item.name)"
                                 :prop="item.prop"></el-table-column>
              </el-table>
            </template>
          </el-table-column>
          <el-table-column label="检查日期"
                           :formatter="formatTime"
                           prop="checkDate"></el-table-column>
          <el-table-column label="被检寝室"
                           prop="roomInfo"></el-table-column>
          <el-table-column label="寝室人员"
                           :formatter="formatDoomMerber"
                           prop="studentList"></el-table-column>
          <el-table-column label="得分"
                           prop="score"></el-table-column>
          <el-table-column label="操作"
                           v-if="userInfo.roleName !== '年级辅导员'">
            <template slot-scope="scope">
              <span class="gtextlink"
                    @click="edit(scope.row)">编辑</span>
            </template>
          </el-table-column>
        </el-table>
        <pagenation :dataLength="total"
                    :page="queryParams.page"
                    :pageSize="queryParams.size"
                    :handleSizeChange="handleSizeChange"
                    :handleCurrentChange="handleCurrentChange" />
      </div>
    </div>
  </div>
</template>
<script>
import { listBuildingByCampusIdAndUserUsingGET, listCampusBySchoolAreaIdAndUserUsingGET, listSchoolAreaByUserUsingGET, listRoomHealthUsingPOST } from '@api/auto'
import { formatTool, pagination } from '@/tools/mixin'
import { _getCampus, _getArea } from '@api/common'
import { addProperty } from '@/tools/utils'
export default {
  name: '',
  props: {
  },
  mixins: [formatTool, pagination],
  components: {},
  data () {
    return {
      total: 0,
      userInfo: {},
      options: [],
      selectedOptions: null,
      queryParams: {
        size: 10,
        page: 1,
        schoolAreaId: null,
        campusId: null,
        buildingId: null,
        roomNum: null
      },
      campus: [],
      gardens: [
      ],
      buildings: [],
      tableData: [],
      cloneData: []
    }
  },
  created () { },
  mounted () {
    this.userInfo = JSON.parse(sessionStorage.userInfo)
    this.listSchoolAreaByUserUsingGET()
    this.query()
  },
  methods: {
    cascade (type) {
      switch (type) {
        case 'campus':
          this.listCampusBySchoolAreaIdAndUserUsingGET()
          break
        case 'gardens':
          this.listBuildingByCampusIdAndUserUsingGET()
          break
        case 'building':
          this.listFloorByBuildingIdUsingGET()
          break
      }
    },
    // 用户根据登陆用户查询可以查看的校区
    listSchoolAreaByUserUsingGET () {
      listSchoolAreaByUserUsingGET()
        .then(res => {
          this.campus = res.data
        })
    },
    // 根据登陆用户查询指定校区下的园区
    listCampusBySchoolAreaIdAndUserUsingGET () {
      this.queryParams.campusId = null
      this.queryParams.buildingId = null
      this.buildings = []
      this.gardens = []
      listCampusBySchoolAreaIdAndUserUsingGET(this.queryParams.schoolAreaId)
        .then(res => {
          this.gardens = res.data
        })
    },
    // 根据园区id和登陆用户查询管辖的楼栋
    listBuildingByCampusIdAndUserUsingGET () {
      this.queryParams.buildingId = null
      this.buildings = []
      listBuildingByCampusIdAndUserUsingGET(this.queryParams.campusId)
        .then(res => {
          this.buildings = res.data
        })
    },
    getChildTable (e) {
      console.log(e)
    },
    add () {
      this.$router.push({
        path: '/main/dormManage/sanitation/edit'
      })
    },
    edit (data) {
      // 跳转编辑页
      sessionStorage.sanitationDetail = JSON.stringify(data)
      this.$router.push({
        path: '/main/dormManage/sanitation/edit',
        query: {
          routeName: '编辑',
          type: 'edit'
        }
      })
    },
    query (pageNum = 1) {
      this.queryParams.page = pageNum
      if (!this.queryParams.roomNum) {
        this.queryParams.roomNum = null
      }
      listRoomHealthUsingPOST(this.queryParams)
        .then(res => {
          if (!res.data) {
            this.total = 0
            this.tableData = []
          } else {
            this.total = (res.data && res.data.total) || 0
            this.tableData = (res.data && res.data.list) || []
            this.cloneData = this.$lodash.cloneDeep(this.tableData)
          }
        })
    },
    init () {
      this.queryParams = {
        size: 10,
        page: 1,
        schoolAreaId: null,
        campusId: null,
        buildingId: null,
        roomNum: null
      }
      this.gardens = []
      this.buildings = []
    },
    reset () {
      this.init()
      this.query()
    },
    // 下拉框出现/隐藏时触发; 出现则为 true，隐藏则为 false
    handleItemDisplay (flag) {
      if (flag) {
        console.log('出现下拉框')
        _getCampus()
          .then(res => {
            this.options = addProperty(res.data, { children: [] })
          })
      }
    },
    handleItemChange (data) {
      console.log(data[0])
      _getArea(data.shift())
    }
  }
}
</script>
<style lang='less' scoped>
</style>
<style lang="less">
.el-table__expanded-cell[class*="cell"] {
  padding: 0;
}
</style>
